<template>
	<page>
		<view class="container">
			<form @submit="onSubmit" report-submit='true'>
			<view class="setting-box">
				<view class="setting-index-list">
					<view class="setting-index-item">
						<view class="left-part font-16 col-20">
							手机号码
						</view>
						<view class="right-part">
							<view class="font-16"><input placeholder='输入手机号码' name='mobile' :data-key="captcha" :value="mobile" @input='bindInput' data-key="mobile" /></view>
						</view>
					</view>
					<view class="setting-index-item">
						<view class="left-part font-16 col-20">
							验证码
						</view>
						<view class="right-part">

							<view class="font-16"><input placeholder='输入验证码' name='captcha' :data-key="captcha" :value="captcha" @input='bindInput' /></view>
							<view>
								<view class="get-qrcode-btn" v-if="startTime" @tap="getCaptcha">获取</view>
								<view class="get-qrcode-btn" v-else>{{time}}S</view>
							</view>
						</view>
					</view>
				</view>
				<view class="mgt-30">
					<button id='1' class='submit-btn  bg-blue font-18' hover-class formType="submit">登录</button>
				</view>

			</view>
			</form>
			<view class='three-login'>
				<!-- <view class='long-span'></view> -->
				<!-- <text>第三方登录</text> -->
				第三方登录
			<!-- 	<view class='long-span'></view> -->
			</view>
			<view class='three-login-img'>
				<!-- <view class='qq'>
					<image src='/static/images/tui.png'></image>
					<text>QQ</text>
				</view> -->
				<view class='wx' @tap='goWx'>
					<image src='/static/images/wx.png'></image>
					<text>微信</text>
				</view>
			</view>
			
		</view>
	</page>
</template>
<style>
	@import url("../../../static/style/app.css");
	.setting-box{
		height:540upx;
	}
	.three-login{
		height:100upx;
		margin:0 auto;
		line-height:100upx;
		align-items:center;
		width:500upx;
		margin:0 auto;
		text-align:center;
	}
	.three-login text{
		width:200upx;
		color:#ccc;
		display:flex;
		height:100upx;
		text-align:center;
	}
	/* .three-login .long-span{
		border-bottom:1upx solid red;
		display:flex;
		width:200upx;
		
	} */
	
	.three-login-img{
		display:flex;
		padding:10upx 0;
		width:400upx;
		margin:30upx auto 0;
	}
	.three-login-img .wx{
		margin:0 auto;
		
	}
	.three-login-img .qq,.three-login-img .wx{
		text-align:center;
		align-items:center;
		width:200upx;
		display:flex;
		flex-direction: column;
	}
	.three-login-img .qq image{
		width:150upx;
		height:150upx;
	}
	.three-login-img .wx image{
		width:150upx;
		height:150upx;
	}
	.get-qrcode-btn {
		width: 110rpx;
		line-height: 54rpx;
		text-align: center;
		background: rgba(255, 255, 255, 1);
		border-radius: 8rpx;
		border: 1px solid rgba(33, 144, 255, 1);
		color: rgba(33, 144, 255, 1);
	}

	.submit-btn {
		margin: 0 40rpx;
		color: white;
		line-height: 94rpx;
		text-align: center;
		background: rgba(33, 144, 255, 1);
		border-radius: 16rpx;
		font-size: 32rpx;
		/* border:2px solid rgba(5,5,5,0.08); */
	}
</style>
<script>
	import app from '@/App.vue';
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js';
	export default {
		data() {
			return {
				mobile: "",
				captcha: "",
				time: 60,
				startTime: true,
			}
		},
		onLoad(){
			console.log('onLoad的开始执行');
			this.main_getGlobal();
		},
		methods: {
			goWx(){
				// #ifdef APP-PLUS
				var it=this;
				var getAppid=plus.runtime.appid;
				console.log('app登录');
				uni.login({
					provider:'weixin',
					success:function(loginRes){
						console.log('loginRes的值',loginRes);
						uni.showModal({
							content:JSON.stringify(loginRes.authResult),
							cancelText:'我在想想',
							cancelColor:'#999',
							confirmText:'转让',
							confirmColor:'#dec17c',
							success:function(res){
								console.log('第一次成功的res值',res);
							}
						})
					}
				});
				let weixinService=null;
				let len='';
				let result='';
				let userInfo='';
				let that=this;
				//http://ww.html5plus.org/doc/zh_cn/oauth.html#plus.oauth.getServices
				plus.oauth.getServices(function(services){
					console.log(312589340656548);
					console.log(services);
					if(services&&services.length){
						for(var i=0,len=services.length;i<len;i++){
							if(services[i].id=='weixin'){
								weixinService=services[i];
								console.log('授权对象');
								console.log('授权对象weixinService的值',weixinService);
								break;
							}
						}
						if(!weixinService){
							console.log('没有微信登录授权服务');
							return;
						}
						var clientInfo=plus.push.getClientInfo();
						console.log('进来的weixinService',weixinService);
						weixinService.authorize(function(event){ //获取code的关键
							console.log(event);
							console.log(event.code,'这次是真的授权后返回的code');
							let postData={
								code:event.code
							}
							gyzjModel.prototype.AppUserLogin(postData,clientInfo.clientid).then(res=>{
								console.log('进来没有执行',res);
								/*如果类型为1,那么是老会员*/
								 result=res.data.type;
								 console.log('result',result);
								if(result.type==1){
									console.log('进来了result的type为1',result.access_token);
									app.globalData.token=result.access_token;
									uni.setStorageSync('token',app.globalData.token);
									console.log('进来了result的type为2');
									that.main_getUserInfo(result.access_token,1).then(res=>{
										console.log('获取的res的值',res);
										app.globalData.userInfo=res.data.user;
									});
									uni.setStorageSync('userInfo',app.globalData.userInfo);
									uni.setStorageSync("myUsername",app.globalData.userInfo.hx_username);
									uni.showToast({
										title: '登录成功!',
										icon: 'none',
									})
									uni.reLaunch({
										url:"../../index/index"
									})
									/*否则是新会员*/
								}else if(result.type==2){
									uni.showToast({
										title: '登录失败,您还未在小程序关联登录!',
										icon: 'none',
									})
								}
							});
						})
					}
				})
				// #endif
			},
			//登录，小程序有用，而app端无用
			login() {
				// 1.wx获取登录用户code
				return new Promise((resolve,reject)=>{
					uni.login({
						provider: 'weixin',
						success: function(loginRes) {
							console.log('微信登录aa');
							let postData={
								code:loginRes.code,
								inviteCode:'',
							}
							resolve(gyzjModel.prototype.userLogin(postData));
						},
					});
				})
			},
			/*登录微信,可能用的是网页版的,唯一能获取的只有code值*/
			codeGoWx(){
				// #ifdef APP-PLUS
				
				
			   let _self = this;
			   plus.oauth.getServices(function(services) {  
				   let auths = services;  
				   console.log('整体的auths的值为',auths);
				   let aweixin = auths[0];  
				   console.log('aweixin的值啊',aweixin);
				   /*第一次授权的值*/
				   if (!aweixin.authResult) {  
					   aweixin.authorize(function(e) {  
						   console.log('e的code的值',e.code);//app端获取到的code  
						   let postData={
						   	// code:loginRes.code,
						   	//code值可能有所改变
						   	code:e.code
						   }
						   console.log('postData里面的值',postData);
						   gyzjModel.prototype.AppUserLogin(postData).then(res=>{
						   	console.log('res的值为',res)
						   });
					   }, function(e) {  
						   uni.showToast({  
							   title: '微信授权失败',  
							   icon: 'none'  
						   })  
					   }, {  
						   scope: 'snsapi_userinfo',  
						   state: '123'  
					   });  
				   } else {  
					   if(!aweixin){
						   uni.showToast({
							   title: '当前环境不支持微信登录',  
							   icon: 'none'  
						   })  
					   }
					   /*已经授权的操作*/
	
					   	aweixin.authorize(function(e) {
					   console.log('e的code的值',e.code);//app端获取到的code  
						   let postData={
							// code:loginRes.code,
							//code值可能有所改变
							code:e.code
						   }
						   console.log('postData里面的值',postData);
						   gyzjModel.prototype.AppUserLogin(postData).then(res=>{
							console.log('res的值为',res)
						   });
					
					   })
					   uni.showToast({
					   						   title: '已授权a',  
					   						   icon: 'none'  
					   })  
				   }  
			   }, function(e) {  
				   plus.nativeUI.alert("获取登录授权服务列表失败：" + JSON.stringify(e));  
			   });  				
				console.log('开始登陆的操作');
				/*事先获取token的值,但不能设置,可能中途用户退出了操作*/
				// this.Old_main_login().then(res=>{
				// 	console.log('登录获取res',res);
				// 	let token=encodeURIComponent(res.data.token);
				// 	console.log('获取的token的值',token);
				// 	this.main_getUserInfo(token,1).then(res=>{
				// 		console.log('获取到的res的值',res);
				// 		let userInfo=res.data.user;
				// 		if(userInfo.nickName&&userInfo.type>1){
				// 			uni.reLaunch({
				// 				url:'/pages/index/index'
				// 			})
				// 		}else{
				// 			uni.navigateTo({
				// 				url:'../login'
				// 			})
				// 		}
				// 	});
					
				// })
				// uni.login({
				// 	provider: 'weixin',
				// 	success: function(loginRes) {
				// 		console.log('微信登录',loginRes);
				// 		let postData={
				// 			// code:loginRes.code,
				// 			//code值可能有所改变
				// 			code:loginRes.authResult.access_token,
				// 			inviteCode:'',
				// 		}
				// 	},
				// });
				// #endif
			},
			/*getGlobal全局公共函数*/
			validation(e) {
				console.log('e的开始',e);
				let postData = {
					mobile: e.mobile,
					captcha: e.captcha,
				};
				console.log('验证手机号码',postData.mobile);
				console.log('验证验证码',postData.captcha);
				if (!/^1[3456789][0-9]{9}$/.test(postData.mobile)) {
					return "请输入正确的手机号"
				} else if (postData.captcha == "") {
					return "请输入正确的验证码"	
				}
				return true
			},
			  bindInput(e){
				  console.log('e输入的值',e);
				let key = e.currentTarget.dataset.key;
				console.log('e.key',key);
				console.log('e.值',e.detail.value);
				if(key=='mobile'){
					this.mobile=e.detail.value;
				}else{
					this.captcha=e.detail.value;
				}
			  },
			onSubmit(e) {
				console.log('e的开始提交',e);
				let errorMsg = this.validation(e.detail.value);
				if (errorMsg !== true) {
					uni.showToast({
						title: errorMsg,
						icon: "none",
					})
					return;
				}
				let postData = {
					mobile: this.mobile,
					captcha: this.captcha,
				}
				// #ifdef APP-PLUS
					var clientInfo=plus.push.getClientInfo();
				// #endif
				// #ifdef MP-WEIXIN
					var clientInfo=Array();
					 clientInfo['clientid']='';
				// #endif
				gyzjModel.prototype.getUserInfoMobile(postData,2,clientInfo.clientid).then(res => {
					if (res.code == 1) {
						let arrCount=res.data;
						console.log('arrCount的值',arrCount);
						if(arrCount.hasOwnProperty('account')&&arrCount.mobile){
							uni.showModal({
								title: '绑定',
								content: '系统检测到您的App和小程序存在相同账号，是否进行绑定?绑定后可以同时登陆小程序和App!',
								confirmText: "绑定",
								confirmColor: '#f94c48',
								cancelText: "不绑定",
								cancelColor: '#f94c48',
								success(res) {
									console.log('res的值',res);
									 if(res.cancel){
										// 用户点击了取消属性的按钮，对应选择了'女'
										arrCount['attribute']='false';
									  }else if(res.confirm){
										arrCount['attribute']='true';
									  }
									  console.log('arrCount的值',arrCount);
									  // 用户点击了确定属性的按钮，对应选择了'男'
									  gyzjModel.prototype.PostOneMobile(arrCount).then(res=>{
									  	uni.showToast({
									  		title: '登录成功',
									  	})
									  	console.log('成功的res的值',res);
									  	/*登录成功后同时保存用户手机和电话信息*/
									  	app.globalData.userInfo=res.data.user;
									  	app.globalData.mobile=res.data.user.mobile;
									  	uni.setStorageSync('userInfo',app.globalData.userInfo);
									  	//提交成功之后设置myUsername的值
									  	uni.setStorageSync("myUsername",app.globalData.userInfo.hx_username);
									  	uni.setStorageSync('mobile',app.globalData.mobile);
									  	setTimeout(() => {
									  		uni.reLaunch({
									  			url: '/pages/index/index',
									  		})
									  	}, 1500)
									  })
								}
							});
						}else{
							uni.showToast({
								title: '登录成功',
							})
							console.log('成功的res的值',res);
							/*登录成功后同时保存用户手机和电话信息*/
							app.globalData.userInfo=res.data.user;
							app.globalData.mobile=res.data.user.mobile;
							uni.setStorageSync('userInfo',app.globalData.userInfo);
							//提交成功之后设置myUsername的值
							uni.setStorageSync("myUsername",app.globalData.userInfo.hx_username);
							uni.setStorageSync('mobile',app.globalData.mobile);
							
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/index/index',
								})
							}, 1500)
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			getCaptcha() {
				let postData = {
					mobile: this.mobile,
				}
				gyzjModel.prototype.getCaptcha(postData).then(res => {
					console.log('res的值',res);
					if (res.code == 1) {
						uni.showToast({
							title: '发送成功',
							icon: "none",
						})
						let time = this.time;
						setInterval(() => {
							if (0 < time) {
								this.time = --time;
								this.startTime = false;
							} else {
								this.time = 60;
								this.startTime = true;
							}
						}, 1000)
					}
				})
			},
		}
	}
</script>
